<template>

  <div class="main">
    <ChangeLogin></ChangeLogin>
<!--    <el-dropdown placement="right" @command="$router.push(`/Login_old`)">-->
<!--      <img class="changeToAntherLogin el-dropdown-link" src="../assets/切换卡片.png"/>-->
<!--      <el-dropdown-menu slot="dropdown" >-->
<!--        <el-dropdown-item @click="console.log('12312312312312321')">回到旧版本</el-dropdown-item>-->
<!--        <el-dropdown-item disabled>测试版本v1.0</el-dropdown-item>-->
<!--        <el-dropdown-item disabled>测试版本v1.1</el-dropdown-item>-->
<!--        <el-dropdown-item disabled>测试版本v2.0</el-dropdown-item>-->
<!--        <el-dropdown-item divided disabled>当前版本v2.1</el-dropdown-item>-->
<!--      </el-dropdown-menu>-->
<!--    </el-dropdown>-->

<!--    <el-button>123123123</el-button>-->

<!--    中心-->
    <div class="container">
      <div class="textChange" @click="toChange" >切换</div>
      <div class="bubble"></div>
      <div class="shadow"></div>
    </div>

<!--    登录-->
    <div id="inlogin">
      <div class="inlogin">
      <svg viewBox="0 0 320 300" :class="classSvg">
        <defs>
          <linearGradient inkscape:collect="always" id="linearGradient1" x1="13" y1="193.49992" x2="307"
                          y2="193.49992" gradientUnits="userSpaceOnUse">
            <stop style="stop-color:#0ff;" offset="0" />
            <stop style="stop-color:#f0f;" offset="1" />
          </linearGradient>
        </defs>
        <path
            d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
      </svg>
      <div class="formLogin">
        <label for="acount">账号</label><input id="acount" type="text" @input="fangdou" @focus="inCount" v-model="LoginData.userName"/>
        <label for="password">密码</label><input id="password" type="password" @focus="inPssworde" v-model="LoginData.password"/>
        <button :class="classBtn" @click="inLogin">登录</button>
      </div>
    </div>
      <div class="inlogin2">
        <p>Login</p>
        <p>欢迎来到计协打卡系统，请输入您的账号(学号)，和密码</p>
      </div>
    </div>

<!--    注册-->
    <div id="inlogon">

      <div class="inlogon">
        <label >账号</label><input id="acount" type="text" v-model="SignData.username"/>
        <label >密码</label><input id="password" type="password" v-model="SignData.password"/>
        <label >名称</label><input id="nickname" type="text" v-model="SignData.nickname"/>
        <label >手机</label><input id="phone" type="text"  style="width: 160px" v-model="SignData.phone"/>
        <div class="verify" @click="getCode" >获取验证码</div>
        <label >验证码</label><input id="code" type="text" v-model="SignData.code"/>
        <button class="bunLogon" @click="toSign">注册</button>
      </div>
      <div class="inlogon2">
        <p>Logon</p>
        <p>欢迎注册计协打卡系统，注意账号为学号，名称为真实姓名，手机号不能重复注册</p>
      </div>
    </div>
  </div>
</template>

<script>
// console.log(document.body.clientWidth)

import anime from "../assets/animejs";
import ChangeLogin from "./ChangeLogin";

export default {
  name: "Login2",
  components: {ChangeLogin},
  data(){
    return{
      animeFlage:true,
      //登录的数据
      LoginData:{
        userName:'',
        password:'',
      },
      //注册的数据
      SignData:{
        username:'',
        password:'',
        nickname:'',
        phone:'',
        code:''
      },
      //根据不同屏幕显示
      classSvg:'svg1',
      classBtn:'bunLogin1',
      // 用于判断防抖
      time:true
    }
  },
  methods:{
    //以下为输入光圈
    inCount(){
      anime({
        targets:'path',
        strokeDashoffset:{
          value:0,
          duration:700,
          easing:'easeOutQuart'
        },
        strokeDasharray:{
          value:'240 1386',
          duration:700,
          easing:'easeOutQuart'
        }
      });
    },
    inPssworde(){
      anime({
        targets:'path',
        strokeDashoffset:{
          value:-336,
          duration:700,
          easing:'easeOutQuart'
        },
        strokeDasharray:{
          value:'240 1386',
          duration:700,
          easing:'easeOutQuart'
        }
      });
    },
    inLogin(){
      anime({
        targets:'path',
        strokeDashoffset:{
          value:-730,
          duration:700,
          easing:'easeOutQuart'
        },
        strokeDasharray:{
          value:'530 1386',
          duration:700,
          easing:'easeOutQuart'
        }
      });
      setTimeout(()=>{
        this.toHome()
      },1000)
    },
    //以下为切换动画
    goingLogonAnime(){
      anime({
        targets:'.inlogin',
        translateX: "140%",//设置x轴平移距离
        duration: 500, //设置持续时间
        opacity:0,
        easing:'easeInOutExpo'
      })
      anime({
        targets:'.inlogin2',
        translateX: "220%",//设置x轴平移距离
        duration: 500, //设置持续时间
        opacity:0,
        easing:'easeInOutExpo'
      })
      anime({
        targets:'.inlogon',
        translateX: "-120%",//设置x轴平移距离
        duration: 1000, //设置持续时间
        opacity:1,
        // easing:'easeInOutExpo'
      })
      anime({
        targets:'.inlogon2',
        translateX: "-215%",//设置x轴平移距离
        duration: 1000, //设置持续时间
        opacity:1,
        // easing:'easeInOutExpo'
      })
    },
    goingLoginAnime(){
      anime({
        targets:'.inlogin',
        translateX: "140%",//设置x轴平移距离
        duration: 500, //设置持续时间
        opacity:1,
        easing:'easeInOutExpo'
      })
      anime({
        targets:'.inlogin2',
        translateX: "220%",//设置x轴平移距离
        duration: 500, //设置持续时间
        opacity:1,
        easing:'easeInOutExpo'
      })
      anime({
        targets:'.inlogon',
        translateX: 400,//设置x轴平移距离
        duration: 1000, //设置持续时间
        opacity:0,
        // easing:'easeInOutExpo'
      })
      anime({
        targets:'.inlogon2',
        translateX: 400,//设置x轴平移距离
        duration: 1000, //设置持续时间
        opacity:0,
        // easing:'easeInOutExpo'
      })
    },
    toChange(){

      if(this.animeFlage){
        this.goingLogonAnime()
      }
      else{
        this.goingLoginAnime()
      }
      this.animeFlage=!this.animeFlage
    },
    //一下为登录注册验证
    //登录
    toHome(){
      this.axios.post('/user/login',this.LoginData).then(res=>{
        //登录成功的时候，保存username到浏览器
        console.log(res)
        if(res.data.code==200){
          localStorage.setItem('token',res.data.data.token)
          localStorage.setItem('userName',this.LoginData.userName)
          localStorage.setItem('password',this.LoginData.password)
          // console.log(res)
          this.$message.success('登录成功')
          this.$router.push('/Home')
        }
        else this.$message.warning('登录密码错误')
      }).catch(()=>{
        this.$message.warning('登录密码错误')
      })
    },
    //注册
    toSign(){
      console.log("开始注册")
      // console.log(this.SignData)
      this.axios.post('/Logon',{},{params:this.SignData}).then(res=>{
        console.log(res)
        console.log(this.SignData)
        if(res.data.code=='400'){
          this.$message.error('验证码错误')
        }
        else if(res.data==''){
          this.$message.error('注册失败')
        }
        else if(res.data.code=='200'){
          this.$message.success('注册成功')
          this.LoginData.userName=this.SignData.username
          this.LoginData.password=this.SignData.password
          this.toHome()
        }
      }).catch(()=>{
        this.$message.warning('注册失败，该账号已被注册')
      })
    },
    //获取验证码
    getCode(){
      console.log('获取验证码')
      this.axios.post('/send/code',{},{
        params: {
          phone:this.SignData.phone}
      }).then(res=>{
        console.log("验证码相应",res)
        if(res.data.code=='200'){
          this.$message.success('获取验证码成功')
        }
        else{
          this.$message.error(res.data.msg)
        }
      })
    },
    //防抖功能 
    fangdou(e){
      if(this.time){
        // 必须是清除定时器，不然的话起不到防抖效果
        clearTimeout(this.time)
        this.time = setTimeout(() => {
          let clor = window.document.getElementById('acount')
          if(this.LoginData.userName.length!==12){
            clor.style.color = 'red'
          }else{
            clor.style.color = 'black'
          }
        }, 1000);
      }
    }
  },

  mounted() {
    if(document.body.clientWidth==1920){
      console.log("大屏幕")
          this.classSvg='svg2'
          this.classBtn='bunLogin2'
    }else{
      console.log("小屏幕")
          this.classSvg='svg1'
          this.classBtn='bunLogin1'
    }
    this.goingLoginAnime()
    if(localStorage.token!==undefined) {
      this.LoginData.userName = localStorage.getItem('userName')
      this.LoginData.password = localStorage.getItem('password')
      this.toHome()
    }
  }
}

</script>

<style scoped>
/*@font-face {*/
/*  font-family: f1;*/
/*  src: url("../assets/字体/z1.ttf");*/
/*}*/
/*@font-face {*/
/*  font-family: f2;*/
/*  src: url("../assets/字体/z2.ttf");*/
/*}*/
/*@font-face {*/
/*  font-family: f3;*/
/*  src: url("../assets/字体/z3.ttf");*/
/*}*/
@font-face {
  font-family: f4;
  src: url("../assets/z4.ttf");
}
/*@font-face {*/
/*  font-family: f5;*/
/*  src: url("../assets/字体/z5.ttf");*/
/*}*/
.svg1{
  position: absolute;
  top:-2%;
  left: 20px;
}
.svg2{
  position: absolute;
  top:-45px;
  left: -25px;
  transform: scale(0.8);
}
@media screen and (min-width: 1800px){

}

/*右上角下拉框*/
.changeToAntherLogin{
  position: fixed;
  top:5%;
  left: 3%;
  height: 20px;
}
.changeToAntherLogin:hover{
  cursor: pointer;
}
.main/deep/.el-dropdown{
  position: fixed;
  top:7%;
  left:5%
}

.formLogin{
  position: absolute;
  top:50px
}
/*按钮*/
button{
  background-color: rgba(0,0,0,0);
  /*border: 1px black solid;*/
  border: none;
  width: 250px;
  height: 50px;
  font-size: 30px;
  font-family: STKaiti;
}
button:hover{
  cursor: pointer;
}
/*获取验证码按钮*/
.verify{
  display: inline-block;
  border: 1px black solid;
  width: 120px;
  height:40px;
  position: absolute;
  top:265px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
/*登录按钮*/
.bunLogin1{
  position: absolute;
  top:122%;
  left: 2%;
}
.bunLogin2{
  position: absolute;
  top:135%;
  left: 8%;
}
/*注册按钮*/
.bunLogon{
  position: absolute;
  bottom:20px;
  left: 50px;
}
label{
  color: #4f3e3e;
  display: block;
  margin: 10px 0 5px 0;
  font-size: 18px;
}
input{
  border:none;
  outline: none;
  background-color: transparent;
  /*text-indent: 2px;*/
  font-size: 23px;
  color: #000000;
  font-family: f4;
}
.inlogin{
  position: absolute;
  z-index: 4;
  width: 16%;
  height:30%;
  /*border: 1px saddlebrown solid;*/
  top: 22%;
  /*transform: translate(0,0);*/
  right:35%;
  padding: 60px;
  box-shadow: 0 2px 10px 10px rgba(0,0,0,0.4);
  /*background-color: rgb(243,224,210);*/
  background: linear-gradient(150deg,#E0B8C9,#FCF4D6);
  /*background: linear-gradient(150deg,#d299c2,#fef9d7);*/
  /*background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);*/
  opacity: 0;
  /*background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);*/

  /*background-color: #DCD9D4;*/
  /*background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);*/
  /*background-blend-mode: soft-light,screen;*/

  /*background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);*/
}
.inlogin label{
  margin: 4% 0 5% 0;
}
.inlogin2{
  /*font-family: f1;*/
  position: absolute;
  z-index: 0;
  width: 15%;
  height: 34%;
  /*border: #80D0C7 1px solid;*/
  right:58%;
  top: 27%;
  /*transform: translate(0,-50%);*/
  /*border-radius: 50px;*/
  background-color: rgba(222, 158, 172, 0.4);
  /*background: linear-gradient(150deg,#E0B8C9,#FCF4D6);*/
  /*box-shadow: 0 2px 10px 10px rgba(0,0,0,0.2);*/
  /*writing-mode: vertical-lr;*/
  font-size: 200%;
  opacity: 0;
}
.inlogin2 p:nth-child(1){
  /*font-family: f5;*/
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 4px;

  text-align: center;
  font-size: 40px;
  margin: 20px 0 30px 0;
  /*margin-bottom: 20px;*/
}
.inlogin2 p:nth-child(2){
  /*text-indent: 2em;*/
  font-size: 10px;
  line-height: 20px;
  margin: 20px;
}
.inlogon{
  position: absolute;
  z-index: 2;
  width: 20%;
  height:60%;
  /*border: 1px saddlebrown solid;*/
  top: 16%;
  /*transform: translate(0,-50%);*/
  left: 33%;
  box-shadow: 0 2px 10px 10px rgba(0,0,0,0.2);
  /*background-color: rgb(196, 112, 112);*/
  background: linear-gradient(150deg,#D29AC2,#EDD4CF);
  opacity: 0;
  padding: 40px;
}
.inlogon input{
  border-bottom: 1px #b78e8e solid;
}
.inlogon2{
  position: absolute;
  z-index: 0;
  width: 14%;
  height: 40%;
  /*border: 1px #442d18 solid;*/
  top: 27%;
  /*transform: translate(0,-50%);*/
  left: 58%;
  background-color: rgba(248, 131, 157, 0.2);
  opacity: 0;
}
.inlogon2 p:nth-child(1){
  /*font-family: f5;*/
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 4px;

  text-align: center;
  font-size: 40px;
  margin: 20px 0 30px 0;
  /*margin-bottom: 20px;*/
}
.inlogon2 p:nth-child(2){
  /*text-indent: 2em;*/
  font-size: 10px;
  line-height: 20px;
  margin: 20px;
}
/*#inlogin{*/
/*  border: 3px saddlebrown solid;*/
/*}*/

path{
  /* 取消填充 */
  fill:none;
  /* 定义一条直线，引用定义好的线性渐变 */
  stroke: url(#linearGradient1);
  /* 线的厚度 */
  stroke-width: 4;
  /* 设置虚线：虚线的长度间距 */
  stroke-dasharray: 240 1500;
}

*{
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
}
.main{
  /* 100%窗口高度 */
  height: 100vh;
  width: 100%;
  /* 弹性布局 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(150deg,#d299c2,#fef9d7);
  /*background-color: #DCD9D4;*/
  /*background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);*/
  /*background-blend-mode: soft-light,screen;*/
  /* 溢出隐藏 */
  overflow: hidden;
}
.container{
  width: 200px;
  height: 200px;
  /* 相对定位 */
  position: relative;
  z-index: 5;
}
.container:hover{
  cursor: pointer;
}
/*跑跑的文字*/
.textChange{
  height:100%;
  z-index: 1;
  top: 40%;
  left: 36%;
  position: absolute;
  animation: bubble 4s ease-in-out infinite;
  font-size: 30px;
  color: #f4f5f7;
  /*font-family: sans-serif;*/
}
/* 泡泡 */
.bubble{
  width: 100%;
  height: 100%;
  /* 径向渐变 */
  background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
  border-radius: 50%;
  /* 阴影 */
  box-shadow: inset 0 0 20px #fff,
  inset 10px 0 46px #eaf5fc,
  inset 80px 0 60px #efcde6,
  inset -20px -60px 100px #f9f6de,
  inset 0 50px 140px #f9f6de,
  0 0 90px #fff;
  /* 执行动画：动画名 时长 加速后减速 无限次播放 */
  animation: bubble 4s ease-in-out infinite;
}
.shadow{
  background-color: rgba(0,0,0,0.15);
  width: 150px;
  height: 40px;
  border-radius: 50%;
  /* 绝对定位 */
  position: absolute;
  left: 50%;
  margin-left: -75px;
  bottom: -100px;
  /* 一点点模糊效果 */
  filter: blur(1px);
  /* 执行动画：动画名 时长 加速后减速 无限次播放 */
  animation: shadow 4s ease-in-out infinite;
}
/* 定义动画 */
/* 泡泡浮动动画 */
@keyframes bubble {
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-80px);
  }
}
/* 投影动画 */
@keyframes shadow {
  0%,100%{
    transform: scale(0.5);
  }
  50%{
    transform: scale(1);
  }
}
</style>